<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>

  <div id="app">
    <!-- checkbox单选框 -->
    <label for="agree">
      <input type="checkbox" id="agree" v-model="isAgree">同意协议
    </label>
    <h2>是否同意：{{isAgree}}</h2>
    <button :disabled="!isAgree">下一步</button>

    <h1></h1>

    <!-- checkbox多选框 -->
    <label for="Basketball">
      <input type="checkbox" value="Basketball" id="Basketball" v-model="hobbies">Basketball
    </label>
    <label for="Football">
      <input type="checkbox" value="Football" id="Football" v-model="hobbies">Football
    </label>
    <label for="Pingpong">
      <input type="checkbox" value="Pingpong" id="Pingpong" v-model="hobbies">Pingpong
    </label>
    <label for="Volleyball">
      <input type="checkbox" value="Volleyball" id="Volleyball" v-model="hobbies">Volleyball
    </label>

    <h2></h2>

    <label v-for="item in originHobbies" :for="item">
      <input type="checkbox" :value="item" :id="item" v-model="hobbies">{{item}}
    </label>
    <h2>Your hobbies: {{hobbies}}</h2>

  </div>

  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: 'Hello',
        isAgree: false,
        hobbies: [],
        originHobbies: ['Basketball', 'Football', 'Pingpong', 'Volleyball', 'Ball']
      }
    })
  </script>
</body>

</html>